<template>
	<!-- <view class="calendar-item"> -->
		<!-- <view class="date">{{info.date}}</view> -->
		<!-- <view class="time-box" v-for="timeObj in item.times" :key="timeObj.time"> -->
			<!-- <view class="time">{{timeObj.time}}</view> -->
			<!-- <view class="goods-list"> -->
			<navigator :url="'/pages/goods/index?goods_id=' + info.goods_id" hover-class="none">
				<view class="goods-item">
					<view class="goods-cover">
						<easy-loadimage class="goods-img" mode="aspectFill" :scroll-top="scrollTop" :image-src="info.goods_image" border-radius="0"></easy-loadimage>
					</view>
					<view class="goods-info">
						<view class="f-w f-28 onelist-hidden--s">{{ info.goods_name }}</view>
						<view class="m-top24 dis-flex flex-y-center f-24 ">
							<view :class="'goods__status ' + (info.new_goods_status.value == 2 ? 'disabled' : '')">
								{{ info.new_goods_status.text }}
							</view>
							<view v-if="0 == info.new_goods_status.value" class="count-down-wrapper"></view>
						</view>
						<view class="m-top10 dis-flex flex-y-center ">
							<view class="global-limit">限量</view>
							<view class="global-limit-count">{{ info.show_total_stock_num }}份</view>
						</view>
						<view class="publisher m-top10 dis-flex flex-y-end ">
							<view class="publisher__name">
								<text decode class="dy-iconfont icon-user">&nbsp;</text>
								{{ info.publisher_name }}
							</view>
						</view>
						<view class="btn-detail">查看详情</view>
					</view>
				</view>
				</navigator>
			<!-- </view> -->
		<!-- </view> -->
	<!-- </view> -->
</template>

<script>
	export default {
		/**
		 * 组件的属性列表
		 */
		props: {
			info: Object,
			scrollTop:{
				type:Number,
				default:0
			}
		},
		data() {
			return {
				
			}
		},
		created(){
			console.log(this.info)
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.calendar-item{
		margin-bottom: 40rpx;
		// padding-top:40rpx;
		background: #FFF;
		border-radius: 10rpx;
	}
	// .calendar-item .date{
	// 	margin-left: 22rpx;
	// 	font-size: 38rpx;
	// 	font-weight: bold;
	// 	color: $uni-text-color-inverse;
	// }
	// .calendar-item .time{
	// 	margin: 24rpx 0 24rpx 22rpx;
	// 	font-size: 30rpx;
	// 	font-weight: bold;
	// 	color: $uni-text-color-inverse;
	// }
	.goods-item{
		margin-bottom: 20rpx;
		// padding-top:40rpx;
		background: #F2F2F2;
		border-radius: 10rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		// padding-right:18rpx;
		width: 100%;
		// height: 242rpx;
		// background: #434443;
		// border-radius: 40rpx;
		overflow: hidden;
	}
	.goods-item + .goods-item{
		margin-top:18rpx;
	}
	
	.goods-cover{
		flex-shrink: 0;
		margin-right: 30rpx;
		width: 224rpx;
		height: 224rpx;
		// border-radius: 40rpx;
		overflow: hidden;
	}
	
	.goods-img{
		width: 224rpx;
		height: 224rpx;
	}
	.goods-info {
		width: 100%;
		height: 100%;
		padding: 20rpx 0 10rpx;
		position: relative;
	}
	
	.btn-detail {
		width: 152rpx;
		height: 56rpx;
		box-sizing: border-box;
		border: 1px solid $uni-border-color-main;
		border-radius: 36rpx;
		text-align: center;
		font-size: 20rpx;
		color: $uni-text-color-main;
		line-height: calc(56rpx - 2px);
		position: absolute;
		right: 18rpx;
		bottom: 20rpx;
	}
	
	.goods__status {
		font-weight: bold;
		color: $uni-text-color-main;
	}
	
	.goods__status.disabled {
		// font-size: 26rpx;
		color: $uni-text-color;
	}
	
	.global-limit {
		display: inline-block;
		height: 34rpx;
		background: $uni-bg-color;
		padding: 0 16rpx;
		border-radius: 1px 0 0 1px;
		font-size: 22rpx;
		text-align: center;
		color: #ffffff;
		line-height: 34rpx;
	}
	
	.global-limit-count {
		display: inline-block;
		height: 34rpx;
		background: rgba(0, 0, 0, 0.2);
		padding: 0 16rpx;
		border-radius: 0 1px 1px 0;
		font-size: 22rpx;
		text-align: center;
		color: #000;
		line-height: 34rpx;
	}
	
	.count-down-wrapper {
		margin-left: 20rpx;
		padding-left: 20rpx;
		position: relative;
	}
	
	// .count-down-wrapper:before {
	// 	content: '';
	// 	width: 1px;
	// 	height: 22rpx;
	// 	// background: #cccccc;
	// 	position: absolute;
	// 	left: 0;
	// 	top: 50%;
	// 	transform: translateY(-50%);
	// }
	
	.count-down-class {
		font-size: 24rpx;
		color: #909299;
	}
	
	.publisher {
		margin-right: 230rpx;
	}
	
	.icon-user {
		font-size: 26rpx;
		color: #909299;
	}
	
	.publisher__name {
		font-size: 24rpx;
		color: #909299;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>
